@charset "utf-8";


.clmnImg {
	width: 30%;	
	margin-left: 3.5vw;
}
.railImg {
	width: 90%;	
}

.clrspop {
	position: relative;
	display: inline-flex;
	border: solid 1px #666;
	width: 1.9vw;
	height: 1.9vw;
}
.clrspopAfter {
	position: absolute;
	left: 1vw;
	bottom: 3vw;
	z-index: 20;
	border: solid 1px #999;
	background-size: 100%;
	width: 8vw;
	height: 8vw;
}
.clrspopAfter p {
	position: absolute;
	z-index: 20;
	font-size: 1.1vw;
	background-color: #fff;
	padding: 2px 4px;
	border: solid 1px #aaa;
	text-align: right;
	top: -0.5vw;
	left: 5vw;
}

.clmnpop {
	position: relative;
	display: inline-block;
	width: 18%;
	margin: 0 0.3vw;
}
.clmnpop img {
	width: 100%;
}
.clmnpopAfter {
	position: absolute;
	left: 1vw;
	bottom: 13vw;
	z-index: 20;
	border: solid 1px #999;
	background-size: 100%;
	background-repeat: no-repeat;
	width: 18vw;
	height: 24vw;
}
.clmnpopAfter p {
	position: absolute;
	z-index: 20;
	font-size: 1.1vw;
	background-color: #fff;
	padding: 2px 4px;
	border: solid 1px #aaa;
	text-align: right;
	bottom: 0;
	right: 0;
}
.railStyle img {
	display: inline-block;
	width: 45%;
}
.railpop {
	position: relative;
	display: inline-block;
	width: 47%;
}
.railpop img {
	width: 100%;
}
.railpopAfter {
	position: absolute;
	left: 1vw;
	bottom: 8vw;
	z-index: 20;
	border: solid 1px #999;
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: bottom;
	width: 25vw;
	height: 19vw;
	padding: 1vw;
}
.railpopAfter p {
	position: absolute;
	z-index: 20;
	font-size: 1.1vw;
	background-color: #fff;
	padding: 2px 4px;
	border: solid 1px #aaa;
	text-align: right;
	bottom: -2vw;
	right: 0;
}
.glspop {
	position: relative;
	display: inline-block;
	width: 2.5vw;
	height: 2.5vw;
	border: solid 1px #aaa;
}
.glspop img {
	width: 100%;
}
.glspopAfter {
	position: absolute;
	left: 1vw;
	bottom: 4vw;
	z-index: 20;
	border: solid 1px #999;
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: bottom;
	width: 20vw;
	height: 20vw;
	padding: 1vw;
}
.glspopAfter p {
	position: absolute;
	z-index: 20;
	font-size: 1.1vw;
	background-color: #fff;
	padding: 2px 4px;
	border: solid 1px #aaa;
	text-align: right;
	bottom: 0;
	right: 0;
}

.entryDoorDetailsBtn {
	width: 100%;
	background-color: tomato;
	color: white;
	border: solid 1px tomato;
	padding: 0.7vw;
	font-size: 1.5vw;
	cursor: pointer;
	opacity: 0.9;
	margin-top: 0.5vw;
}
.entryDoorDetailsBtn:hover{
	background-color: white;
	color: tomato;
}

.entrygallery {
	position: relative;
	display: inline-block;
	width: 50%;
	vertical-align: top;
	cursor: pointer;
}
.entrygallery:hover::after {
	content: "Click Image to Enlarge";
	position: absolute;
	top: -1.4vw;
	right: 0;
	color: #333;
	font-size: 1.1vw;
}
.entrygallery img{
	padding: 0.2vw;
	border: solid 2px #ccc;
	width: 100%;
}





/* - Start of Overlay - */

.overlayEntrycontent {
	position: relative;
	z-index: 30;
	-webkit-animation-name: zoom;
	-webkit-animation-duration: 0.6s;
	animation-name: zoom;
	animation-duration: 0.6s; 
	border-right: 1vw solid white;	
	background-color: #fff;
	width: 87%;
	max-width: 1100px;
	margin: 4vw auto;
	background-color: white;
	min-height: 170vw;
	display: none;
}
.overlayPopUp::after, .overlayENTRYPopUp::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 40%;
	height: 100%;
	background-color: rgb(199, 105, 61);
	opacity: 0.9;
}
.overlayEntryMainImages {
	position: sticky;
	top: 20vw;
	left: 8vw;
	width: 47%;
	text-align: center;
	z-index: 60;
	-webkit-animation-name: fade-in;
	-webkit-animation-duration: 0.4s;
	animation-name: fade-in;
	animation-duration: 0.4s;
	margin: 0;
}
.overlayRailingImageMain, .overlayRailingImagePicket {
	position: absolute;
	width: 100%;
	left: 0;
}
.overlayRailingImageMain{
	top: 0;
	z-index: 23;
}
.overlayRailingImagePicket {
	top: -0.3vw;
	z-index: 21;
}
.overlayENTRYMainHeading {
	position: absolute;
	z-index: 41;
	color: white;
	text-align: left;
	font-size: 1vw;
}
.overlayENTRYMainHeading span {
	font-size: 2vw;
	font-weight: bold;
}
.overlayENTRYMainHeading {
	top: -7vw;
	left: 5vw;
}
.overlayRailingImage img{
	position: absolute;
	top: 0;
	left: 0;
	width: 88%;
}
.OLPrHd {
	position: absolute;
	z-index: 25;
	top: 23vw;
	left: 0;
	width: 80%;
	cursor: pointer;
	color: #333;
	text-align: Left;
	padding: 1.5vw 0 1.5vw 1.5vw;
	background-color: #fff;
	z-index: 18;
}
.OLTtl {
	display: inline-block;
	font-size: 1.1vw;
	width: 95%;
}
.OLTtl h3 {
	margin: 0 0 0.5vw 0;
}
.OLTtl strong {
	font-size: 1.8vw;
}
.OLPr {
	display: inline-block;
	padding: 1.5vw 2vw;
	background-color: tomato;
	color: white;
	opacity: 0.8;
	vertical-align: top;
	margin: 3vw 0 0 0;
	font-size: 1.3vw;
	width: 25%;
	text-align: center;
}
.OLPr:hover {
	opacity: 1;
}
.fnPcs {
	text-align: right;
	width: 45%;
}
.fnlPcDetails, .fnPcs {
	display: inline-block;
	border-bottom: solid 1px #ddd;
	padding: 0.2vw 0.4vw;
}
.fnlPcDetails {
	width: 40%;
}
.fnlPcL, .fnlPcG, .glassStyleSingle {
	display: none;
}
.fnlPcT {
	display: flex;
	padding: 0.9vw 0 0 0.4vw;
}
.OLSubTtl {
	padding: 0 0.2vw;
	font-weight: bold;
	font-size: 1.2vw;
}
.fnlSubTtl {
	font-size: 2vw;
	font-weight: bold;
	margin-top: -0.5vw;
}
.fnlPcT {
	float: right;
	margin-right: 11%;
}
.clr{
	clear: both;
}


.overlayENTRYContainer {
	width: 100%;
}
.OverlayOptionsContainer {
	position: relative;
	float: right;
	width: 52%;
	padding: 1.5vw;
	background-color: white;
	border: solid 1px #ccc;
	margin: 2vw 1vw 6vw 1vw;
}
.OLsmallHead {
	font-size: 0.8vw;
	margin-bottom: 0.3vw;
}
.OverlayOptionsContainer h3 {
	font-size: 2.1vw;
	margin: 0;
}
.OverlayOptionsContainer p {
	font-size: 1vw;
	margin: 0.5vw 0;
}
.OverlayENTRYInnerContainer {
	padding-bottom: 3vw;
	margin-bottom: 4vw;
	border-bottom: solid 1px #ccc;
}
.OverlayENTRYOptionsTabs {
	position: relative;
	margin-bottom: 1vw;
	background-color: rgb(255, 96, 68, 0.9);
	color: white;
	width: 95%;
	text-align: center;
	padding: 0.5vw 1vw;
	font-size: 1.5vw;
}
.OverlayCutOutImage {
	position: absolute;
	top: 6vw;
	right: 0;
	width: 28%;
	max-width: 145px;
}
.OverlayCutOutImage img {
	width: 100%;
}
.ENTRYSelectorsP {
	padding: 2vw 0 0 0;
	font-size: 1.2vw;
	border-bottom: solid 1px #aaa;
}
.ENTRYSelectorsP p{
	font-size: 0.8vw;
	margin: 0 0 1.5vw 0;
}

.railSingle {
	display: inline-flex;
}
.rails {
	width: 60%;
}
.measurement {
	margin: 1vw 0 0 4vw;
	width: 40%;
}
.measurement h5 {
	margin: 0 0 0.5vw 0;
	font-size: 1.1vw;
}
.measurement input{
	width: 50%;
	margin: 0.5vw;
	height: 1.5vw;
}
.measurement button{
	margin-left: 3%;
	width: 54%;
	padding: 0.5vw 0;
	font-size: 1vw;
	cursor: pointer;
}
.inputCont input{
	font-size: 1.1vw;
}
.inputCont p{
	margin: 0;
}
.railStyleCont {
	display: inline-block;
	width: 49%;
}
.glassCont img {
	border: solid 1px #ddd;
}
.glassCont {
	display: inline-block;
	width: 20%;
	margin: 0.5vw;
}
.scrollCont {
	display: inline-block;
	margin: 0.5vw auto;
	width: 45%;
}
.ornamentCont, .glassOrnntCont {
	display: inline-block;
	width: 30%;
}
.glassCont p, .scrollCont p{
	font-size: 1vw;
	margin: 0 0 0 0.5vw;
	font-weight: bold;
}
.railStyleCont p, .ornamentCont p, .glassOrnntCont {
	font-size: 1vw;
	margin: -1vw 0 0 0.5vw;
	font-weight: bold;
}
.olRailImg, .olOrnament, .olScroll, .olGlass, .olGlassScroll {
	width: 100%;
	cursor: pointer;
}
.railStyleDouble, .glassStyleDouble {
	display: none;
}
.olclrspop {
	font-size: 1vw;
	margin: 1vw;
	padding: 1vw;
	border: solid 1px #ccc;
	cursor: pointer;
}
.overlayDetailBulletPoints {
	padding: 0 0 1vw 0;
	font-size: 1vw;
}



	
.smallOl_img {
	position: relative;
	z-index: 30;
	margin: auto;
	-webkit-animation-name: zoom;
	-webkit-animation-duration: 0.6s;
	animation-name: zoom;
	animation-duration: 0.6s; 
	border: 1vw solid white;	
	background-color: #fff;
}
.smallGallery {
	width: 85%;
	max-width: 1100px;
	margin: 4vw auto;
	display: none;
}
@-webkit-keyframes zoom {
	from {-webkit-transform:scale(0)} 
	to {-webkit-transform:scale(1)}
}  
@keyframes zoom {
	from {transform:scale(0)} 
	to {transform:scale(1)}
}
@-webkit-keyframes fade-in {
	from {opacity: 0;}
	to {opacity: 1;}
}
@keyframes fade-in {
	from {opacity: 0;}
	to {opacity: 1;}
}

.smallOlHd {
	position: absolute;
	top: 0;
	right: 0;
	color: white;
	font-size: 1.3vw;
	padding: 1.5vw 2vw;
	background-color: sandybrown;
	text-align: right;
}
.smallOlHd h3 {
	margin: 0;
}
.smallOLGallery img {
	width: 100%;
}
.OLGlsTab {
	position: absolute;
	top: -3.8vw;
	right: -1vw;
	z-index: 40;
	color: white;
	text-align: center;
	padding: 0.5vw 1vw;
	font-size: 1.3vw;
}

.OverlaycloseBtn {
	position: absolute;
	top: -3vw;
	right: -4vw;
	font-size: 3vw;
	color: white;
	z-index: 30;
	cursor: pointer;
}
.OverlaycloseBtn:hover::after  {
	content: "Close";
	position: absolute;
	top: 1vw;
	left: 3vw;
	padding: 0.2vw;
	background-color: white;
	border: solid 1px #ccc;
	color: black;
	font-size: 1vw;
}
.OLsmallBtnsprv, .OLsmallBtnsnxt {
	position: fixed;
	top: 45%;
	z-index: 30;
	font-size: 5vw;
	color: white;
	margin: 0 10px;
	cursor: pointer;
	opacity: 0.8;
	padding: 2vw;
}
.OLbuttonsnxt:hover, .OLbuttonsprv:hover, .OLsmallBtnsprv:hover, .OLsmallBtnsnxt:hover {
	opacity: 1;
}
.OLsmallBtnsprv {
    left: 0;
}
.OLsmallBtnsnxt {
    right: 0.5vw;
}
.cappingCounter, .smallOLCounter {
	position: absolute;
	font-size: 1.5vw;
	z-index: 30;
	color: #bbb;
	left: 0;
	top: -3vw;
}

.actOLSelect {
	position: relative;
	opacity: 1;
}
.actOLSelect::after {
	content: "Selected";
	position: absolute;
	top: 1vw;
	right: -0.8vw;
	background-color: tomato;
	color: #fff;
	padding: 0.3vw;
	z-index: 50;
	font-size: 0.8vw;
}